<template>
    <div>
        <div style="margin-bottom: 10px;">
            <span style="margin-right:5px;">设备名称</span>
            <ClientSelect v-model="alarm_record_data.client_id" style="width: 200px;margin-right:15px;"></ClientSelect>
            <span style="margin-right:5px;">告警时间</span>
            <Input v-model="alarm_record_data.alarm_time" placeholder="请输入告警时间" style="width: 200px;margin-right: 10px;"></Input>
            <span style="margin-right:5px;">告警内容</span>
            <Input v-model="alarm_record_data.alarm_content" placeholder="请输入告警内容" style="width: 200px;margin-right: 10px;"></Input>
            <Button type="primary" @click="handleAlarmRecordsSearch" style="margin-right: 15px;">搜索</Button>
            <Button @click="handleClearAlarmRecordsSearch">重置</Button>
        </div>
        <Table v-if="show" :columns="alarm_record_data.columns" :data="alarm_record_data.data" border stripe>
            <template #client_id="{ row }">
                <ClientTableCellValue :client_id="row.client_id" />
            </template>
            <template #action="{ row }">
                <AlarmRecordReadButton :data="row" />
            </template>
        </Table>
        <Page :total="alarm_record_data.page_total" size="small" show-elevator show-sizer show-total style="margin-top: 10px;" @on-change="handleAlarmRecordsPageChange" @on-page-size-change="handleAlarmRecordsPageSizeChange" />
    </div>
</template>

<script>
import ClientSelect from './ClientSelect.vue';
import ClientTableCellValue from './ClientTableCellValue.vue';
import AlarmRecordReadButton from './AlarmRecordReadButton.vue';

export default {
    name: "AlarmRecordsView",
    components: {
        ClientSelect,
        ClientTableCellValue,
        AlarmRecordReadButton,
    },
    data() {
        return {
            show: false,
            alarm_record_data: {
                client_id: '',
                plan_id: 0,
                alarm_time: '',
                alarm_content: '',
                columns: [
                    { title: 'ID', key: 'alarm_id', width: 100, align: 'center' },
                    { title: '设备ID', slot: 'client_id', width: 200, align: 'center' },
                    { title: '告警时间', key: 'alarm_time', width: 200, align: 'center' },
                    { title: '告警内容', key: 'alarm_content' },
                    { title: '操作', slot: 'action', width: 100, align: 'center' }
                ],
                page_total: 40,
                page_size: 10,
                page_current: 1,
                data: []
            },
        };
    },
    methods: {
            handleAlarmRecordsSearch() {
                this.alarm_record_data.page_current = 1;
                this.handleGetAlarmRecords();
            },
            handleClearAlarmRecordsSearch() {
                this.alarm_record_data.client_id = '';
                this.alarm_record_data.alarm_time = '';
                this.alarm_record_data.alarm_content = '';
                this.alarm_record_data.page_current = 1;
                this.handleGetAlarmRecords();
            },
            handleAlarmRecordsPageChange(page_current) {
                this.alarm_record_data.page_current = page_current;
                this.handleGetAlarmRecords();
            },
            handleAlarmRecordsPageSizeChange(page_size) {
                this.alarm_record_data.page_size = page_size;
                this.alarm_record_data.page_current = 1;
                this.handleGetAlarmRecords();
            },
            handleGetAlarmRecords() {
                var url = '/get_alarm_records?page_size=' + this.alarm_record_data.page_size + '&page_current=' + this.alarm_record_data.page_current;
                if (this.alarm_record_data.client_id) {
                    url += '&client_id=' + encodeURIComponent(this.alarm_record_data.client_id);
                }
                if (this.alarm_record_data.alarm_time) {
                    url += '&alarm_time=' + encodeURIComponent(this.alarm_record_data.alarm_time);
                }
                if (this.alarm_record_data.alarm_content) {
                    url += '&alarm_content=' + encodeURIComponent(this.alarm_record_data.alarm_content);
                }
                this.show = false
                this.$http.get(url).then(res => {
                    this.alarm_record_data.page_total = res.page_total;
                    this.alarm_record_data.data = res.data;
                    this.show = true
                });
            },

    },
    created() {
        this.handleGetAlarmRecords();
    },
}
</script>